
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { 
  Users, 
  ArrowRight,
  Plus
} from "lucide-react";
import { useState } from "react";
import { CommunityFilters } from "./CommunityFilters";
import { ZoneSelector } from "./ZoneSelector";
import { TeacherStudentZone } from "./TeacherStudentZone";
import { StudentDiscussionFeed } from "./StudentDiscussionFeed";
import { StudentMetricsBar } from "./StudentMetricsBar";
import { RecommendedCommunitiesStudent } from "./RecommendedCommunitiesStudent";

export const StudentHub = () => {
  const [selectedFilter, setSelectedFilter] = useState("all");
  const [searchQuery, setSearchQuery] = useState("");
  const [activeZone, setActiveZone] = useState("student");

  return (
    <>
      {/* Hero Section */}
      <div className="text-center mb-12">
        <h1 className="text-4xl font-extrabold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent mb-4">
          Student Hub
        </h1>
        <p className="text-gray-600 text-lg max-w-2xl mx-auto">
          Discover study groups, ask questions, and grow together with fellow learners.
        </p>
      </div>

      {/* Student Metrics Bar */}
      <StudentMetricsBar />
      
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {/* Left Sidebar */}
        <div className="lg:col-span-1 space-y-6">
          <ZoneSelector activeZone={activeZone} setActiveZone={setActiveZone} />
          <CommunityFilters 
            searchQuery={searchQuery}
            setSearchQuery={setSearchQuery}
            selectedFilter={selectedFilter}
            setSelectedFilter={setSelectedFilter}
            role="student"
          />
        </div>
        
        {/* Main Content */}
        <div className="lg:col-span-2">
          {activeZone === "student" ? (
            <div className="space-y-8">
              {/* Discussion Feed - Now at the top */}
              <StudentDiscussionFeed />

              {/* Recommended Communities - Moved after Discussion Feed */}
              <RecommendedCommunitiesStudent />
            </div>
          ) : (
            <TeacherStudentZone />
          )}
        </div>
      </div>
      
      {/* Create Your Own Learning Circle */}
      <div className="mt-16 text-center bg-gradient-to-r from-blue-50 to-purple-50 rounded-2xl p-12">
        <div className="max-w-2xl mx-auto">
          <h2 className="text-3xl font-bold text-gray-900 mb-4">
            Create Your Own Learning Circle
          </h2>
          <p className="text-gray-600 text-lg mb-8">
            Start a study group or topic forum to help each other succeed.
          </p>
          <Button size="lg" className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-8 py-4 rounded-full shadow-lg hover:shadow-xl transition-all duration-300">
            <Plus className="w-5 h-5 mr-2" />
            Start a New Group
            <ArrowRight className="w-5 h-5 ml-2" />
          </Button>
        </div>
      </div>
    </>
  );
};
